import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse } from 'antd';
import FilterStyle from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import { RadioInput } from './radioInput';
import {orderTypeFilterItem, remarksItem} from '@/pages/OrderModule/orderList/components/Filter/constant.js';

const { Panel } = Collapse;

/**
 * @desc: 筛选框：留言备注组件
 */
export const Remark = ({ value, onChange, onPressEnter, ...args }) => {
  const { checkingMap } = useFilterFieldsConfig();

  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };

  const onInputChange = (key, value) => {
    triggerChange({ [key]: value });
  };
  if(Object.values(remarksItem).every(item => checkingMap[item] === false)) {
    return <div style={{marginBottom: -6}}/>
  }
  return (
    <Collapse
      bordered={false}
      defaultActiveKey={['remark']}
      expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
      expandIconPosition="end"
      className={FilterStyle['filter-item-collapse']}
    >
      <Panel header="留言备注" key="remark" className={FilterStyle['filter-item-collapse-panel']}>
        {checkingMap.sellerMessage && <RadioInput label={"卖家备注"} hasRemark={value.hadSellerMessage} value={value.sellerMessage} onChange={(value) => triggerChange({ hadSellerMessage: value.hasRemark, sellerMessage: value.text })} onPressEnter={onPressEnter}></RadioInput>}
        {checkingMap.buyerMessage && <RadioInput label={"买家留言"} hasRemark={value.hadBuyerMessage} value={value.buyerMessage} onChange={(value) => triggerChange({ hadBuyerMessage: value.hasRemark, buyerMessage: value.text })} onPressEnter={onPressEnter}></RadioInput>}
        {checkingMap.orderRemark && <RadioInput label={"订单备注"} hasRemark={value.hadOrderRemark} value={value.orderRemark} onChange={(value) => triggerChange({ hadOrderRemark: value.hasRemark, orderRemark: value.text })} onPressEnter={onPressEnter}></RadioInput>}
      </Panel>
    </Collapse>
  );
};

export default Remark;
